<!--
@file：固定资产管理-供应商明细
@time：2019-09-24
@author：chenj
-->
<template>
    <div class="main-wrapper detail-wrapper">
        <div class="page-header">
            <div class="clearfix title-box">
                <span class="fl fz20">供应商明细</span>
                <div class="fr clearfix icon-box">
                    <img class="mr20 fl cursor_p" :src="hoverIndex != index ? img.icon : img.iconActive"
                         v-for="(img, index) in imgList" :key="img.id" @mouseenter="mouseEnter(index)"
                         @mouseleave="mouseLeave(-1)" @click="iconClick(img.id)">
                    <el-button class="add-btn" icon="el-icon-plus" @click="creatAsset">供应商</el-button>
                </div>
            </div>
            <div class="nav-box">
                <div class="nav-list pl20">
                    <span class="nav-item cursor_p fz16 active-nav" v-for="(item, index) in navList" :key="item.id">{{item.name}}</span>
                </div>
            </div>
        </div>
        <div class="main-content p20 w1200 m20">
            <div class="content-box">
                <div class="table-box">
                    <template>
                        <el-table border ref="multipleTable" :data="tableData1" tooltip-effect="dark"
                                  style="width: 100%" max-height="500px" @row-click="handleRow">
                            <el-table-column align="center" type="selection" width="40">
                            </el-table-column>
                            <el-table-column align="center" type="index" label="序号" width="60">
                            </el-table-column>
                            <el-table-column align="center" prop="supplier" label="供应商名称" width="150">
                            </el-table-column>
                            <el-table-column align="center" prop="address" label="供应商地址" width="180">
                            </el-table-column>
                            <el-table-column align="center" prop="contactInformation" label="联系方式" width="120">
                            </el-table-column>
                            <el-table-column align="center" prop="myAsset" label="我的资产" width="90">
                            </el-table-column>
                            <el-table-column align="center" prop="enclosure" label="附件" width="60">
                            </el-table-column>
                            <el-table-column align="center" prop="owner" label="拥有者">
                            </el-table-column>
                            <el-table-column align="center" prop="creater" label="创建人">
                            </el-table-column>
                            <el-table-column align="center" prop="createtime" label="创建时间" width="180">
                            </el-table-column>
                            <el-table-column align="center" prop="updateTime" label="最后修改时间" width="180">
                            </el-table-column>
                        </el-table>
                    </template>
                </div>

            </div>
        </div>
        <!--统计抽屉-->
        <div class="statistics-box">
            <el-drawer custom-class="drawer-box" title="统计" size="600" :visible.sync="drawer">
            	<div id="category" class="p10" ref="category" style="width: 450px;height:350px;">
					<div>新增供应商</div>
                    <div class="range">范围：每月</div>
                    <div class="content">
                        <p class="record-num">记录数量</p>
                        <span>0</span>
                        <p class="line">--</p>
                    </div>                	
                </div>
                <div class="margin-line"></div>
                <div id="newRecord" class="mb20" ref="newRecord" style="width: 450px;height:310px;">
                	<div>每日新增供应商</div>
                	<div class="no-record">没有记录</div>
                </div>
                
                
            </el-drawer>
        </div>
        <!--导出弹框-->
        <el-dialog class="dialog-box" title="导出Excel" :visible.sync="exportDialogVisible" width="34%">
            <div class="dialog-main clearfix export-dialog">
                <div class="dialog-title">将视图下数据导出为Excel</div>
                <p>导出字段</p>
                <div>
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
                    </el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="checked" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="check in checkList" :label="check" :key="check">{{check}}</el-checkbox>
                    </el-checkbox-group>
                </div>
                <p>导出多条关联表记录</p>
                <div>
                    <el-checkbox-group v-model="change">
                        <el-checkbox>我的资产</el-checkbox>
                    </el-checkbox-group>
                </div>
                <p>其他</p>
                <div>
                    <el-checkbox-group v-model="statistics">
                        <el-checkbox>列统计结果</el-checkbox>
                        <el-checkbox>记录分享链接</el-checkbox>
                    </el-checkbox-group>
                </div>
                <div class="dialog-footer">
                    <el-button @click="exportDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="exportDialogVisible = false">导出</el-button>
                </div>
            </div>
        </el-dialog>
        <!--导入Excel-->
        <el-dialog class="dialog-box" title="上传Excel" :visible.sync="uploadDialogVisible" width="34%">
            <div class="dialog-main clearfix upload-dialog">
                <div class="explain">支持10MB以内的xls、xlsx文件,
                    最大行数不超过20000行，列数不超过200列；导入多选类型的控件，请确保Excel字段内各个选项/人员用“，”隔开，否则将无法正常识别数据
                </div>
                <div class="upload-file">
                    <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>选择文件</em></div>
                    </el-upload>
                </div>
                <div class="dialog-footer">
                    <el-button @click="uploadDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="uploadExcel">上传</el-button>
                </div>
            </div>
        </el-dialog>
        <!--详情-->
        <el-dialog class="dialog-box" title="详情" :visible.sync="detailDialogVisible" width="1300px">
            <div class="dialog-main clearfix detail-dialog">
                <div class="fl  base-detail">
                    <div class="head  clearfix ">
                        <span>{{rowValue.type}}</span>
                        <span class="fr">{{rowValue.creater}}创建于{{rowValue.createtime}}</span>
                    </div>
                    <div class="name">
                        <img src="@/assets/images/user.png"/><span>{{rowValue.supplier}}</span>
                    </div>
                    <el-form ref="form" :model="rowValue" label-width="120px">
                        <el-form-item label="供应商名 称" class="w450">
                            <el-input v-model="rowValue.supplier"></el-input>
                        </el-form-item>
                        <el-form-item label="供应商地址" class="w450">
                            <el-input v-model="rowValue.address"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式" class="w450">
                            <el-input v-model="rowValue.contactInformation"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="fl  record-detail">
                    <el-button type="primary" class="btn">我的资产({{lines.length}})</el-button>
                    <div class="infomation">
                    	<div class="infomation-title">
                    		<span v-for="item in titles">{{item}}</span>
                    	</div>
                        <ul>
                            <li v-for="(item,index) in lines">
                            	<span class="serial-number">{{index+1}}</span>
                            	<span>{{item.name}}</span>
                            	<span>{{item.brand}}</span>
                            	<span>{{item.year}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!--新增供应商-->
        <el-dialog class="dialog-box" title="创建供应商" :visible.sync="createDialogVisible" width="680px">
            <div class="dialog-main detail-dialog create-asset">
                <div class="base-detail">
                    <el-form ref="form" :model="newAsset" label-width="86px">
                        <el-form-item label="供应商名称" class="w546">
                            <el-input v-model="newAsset.name"></el-input>
                        </el-form-item>
                        <el-form-item label="供应商地址" class="w220">
                            <el-input v-model="newAsset.number"></el-input>
                        </el-form-item>

                        <el-form-item label="联系方式" class="w220">
                            <el-input v-model="newAsset.model"></el-input>
                        </el-form-item>
                        <el-form-item label="购买金额" class="w220">
                            <el-input v-model="newAsset.amount"></el-input>
                        </el-form-item>
                        <el-form-item label="品牌" class="w220">
                            <el-input v-model="newAsset.brand"></el-input>
                        </el-form-item>

                        <el-form-item label="购买渠道" class="w220">
                            <el-input v-model="newAsset.buyChannel"></el-input>
                        </el-form-item>
                        <el-form-item label="保修时间" class="w220">
                            <el-input v-model="newAsset.warranty"></el-input>
                        </el-form-item>

                        <el-form-item label="资产参数" class="w546">
                            <el-input type="textarea" v-model="newAsset.assetParameters"></el-input>
                        </el-form-item>
                        <el-form-item label="变动记录" class="w546">
                            <el-input type="textarea" v-model="newAsset.record"></el-input>
                        </el-form-item>
                        <el-form-item label="供应商明细" class="w546">
                            <el-input type="textarea" v-model="newAsset.supplierDetails"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="dialog-footer clearfix">
                        <div class="fl">
                            <el-checkbox v-model="checked">保存后继续创建下一条</el-checkbox>
                        </div>
                        <div class="fr">
                            <el-button @click="createDialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="createDialogVisible = false" v-if="!checked">确定
                            </el-button>
                            <el-button type="primary" @click="createDialogVisible = false" v-if="checked">下一条
                            </el-button>
                        </div>

                    </div>
                </div>

            </div>
        </el-dialog>
    </div>
</template>

<script src="./detail.js"></script>
<style scoped lang="scss">
    @import "detail";
</style>
